<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper v-if="swiperCurrent !== undefined" activeColor="#333333" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="changeSwiper" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :scroll-with-animation="true"
						:scroll-top="scrollTop[0].scrollTop" @scroll="scroll" @scrolltolower="reachBottom">
						<view class="page-box">
							<template v-if="orderList[0].length">
								<view class="order" v-for="(item, index) in orderList[0]" :key="index">
									<view class="top">
										<view class="left">
											<view class="store">{{ item.updateTime }}</view>
										</view>
										<view class="right">{{ toOrderStatus(item.orderState) }}</view>
									</view>
									<view class="orderType">
										{{ item.orderType == 2 ? '自提' : '外卖' }}
									</view>
									<view class="temItem" v-for="(jtem,jndex) in item.itemList" :key="jndex">
										<view class="item">
											<view class="left">
												<image :src="jtem.goodsImages" mode="aspectFill"></image>
											</view>
											
										</view>
									</view>
									<view class="total">
										合计:
										<text class="total-price">
											￥{{ item.totalAmount }}
										</text>
									</view>
									<view class="bottom">
										<template v-if="item.orderState == 3 || item.orderState == 4">
											<view class="logistics btn" @click.stop="toOrderLogisticsTracking(item)">
												查看物流</view>
										</template>
										<template v-if="item.orderState == 1 || item.orderState == 2">
											<view class="exchange btn" @click.stop="showCancelOrder(item)">取消订单</view>
										</template>
										<template v-if="item.orderState == 3">
											<view class="evaluate btn" @click.stop="showConfirmReceipt(item)">确认收货
											</view>
										</template>
									</view>
								</view>
								<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
							</template>
							<template v-else>
								<view>
									<view class="centre">
										<image src="../../static/image/wugwc.png" mode="">
										</image>
										<view class="explain">
											<!-- 您还没有相关的订单 -->
											<view class="tips">抱歉，没有找到订单哦</view>
										</view>
									</view>
								</view>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :scroll-with-animation="true"
						:scroll-top="scrollTop[1].scrollTop" @scroll="scroll" @scrolltolower="reachBottom">
						<view class="page-box">
							<template v-if="orderList[1].length">
								<view class="order" v-for="(item, index) in orderList[1]" :key="index">
									<view class="top">
										<view class="left">
											<!-- <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon> -->
											<view class="store">{{ item.updateTime }}</view>
											<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
										</view>
										<view class="right">{{ toOrderStatus(item.orderState) }}</view>
									</view>
									<view class="orderType">
										{{ item.orderType == 2 ? '自提' : '外卖' }}
									</view>
									<view class="" v-for="(jtem,jndex) in item.itemList" :key="jndex">
										<view class="item">
											<view class="left">
												<image :src="jtem.goodsImages" mode="aspectFill"></image>
											</view>
											<!-- <view class="content">
											<view class="title u-line-2">{{ item.goodsName }}</view>
											<view class="type">{{ toSKU(item.goodsSku) }}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ item.goodsPrice }}
											</view>
											<view class="number">x{{ item.goodsNum }}</view>
										</view> -->
										</view>
									</view>
									<view class="total">
										合计:
										<text class="total-price">
											￥{{ item.totalAmount }}
											<!-- <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text> -->
										</text>
									</view>
									<view class="bottom">
										<!-- <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view> -->
										<template v-if="item.orderState == 3 || item.orderState == 4">
											<view class="logistics btn" @click.stop="toOrderLogisticsTracking(item)">
												查看物流</view>
										</template>
										<template v-if="item.orderState == 1 || item.orderState == 2">
											<view class="exchange btn" @click.stop="showCancelOrder(item)">取消订单</view>
										</template>
										<template v-if="item.orderState == 3">
											<view class="evaluate btn" @click.stop="showConfirmReceipt(item)">确认收货
											</view>
										</template>
									</view>
								</view>
								<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
							</template>
							<template v-else>
								<view>
									<view class="centre">
										<image src="../../static/image/wugwc.png" mode="">
										</image>
										<view class="explain">
											<!-- 您还没有相关的订单 -->
											<view class="tips">抱歉，没有找到订单哦</view>
										</view>
										<!-- <view class="btn" @click="toIndex">随便逛逛</view> -->
									</view>
								</view>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :scroll-with-animation="true"
						:scroll-top="scrollTop[2].scrollTop" @scroll="scroll" @scrolltolower="reachBottom">
						<view class="page-box">
							<template v-if="orderList[2].length">
								<view class="order" v-for="(item, index) in orderList[2]" :key="index">
									<view class="top">
										<view class="left">
											<!-- <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon> -->
											<view class="store">{{ item.updateTime }}</view>
											<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
										</view>
										<view class="right">{{ toOrderStatus(item.orderState) }}</view>
									</view>
									<view class="orderType">
										{{ item.orderType == 2 ? '自提' : '外卖' }}
									</view>
									<view class="" v-for="(jtem,jndex) in item.itemList" :key="jndex">
										<view class="item">
											<view class="left">
												<image :src="jtem.goodsImages" mode="aspectFill"></image>
											</view>
										</view>
									</view>
									<view class="total">
										合计:
										<text class="total-price">
											￥{{ item.totalAmount }}
											<!-- <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text> -->
										</text>
									</view>
									<view class="bottom">
										<!-- <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view> -->
										<template v-if="item.orderState == 3 || item.orderState == 4">
											<view class="logistics btn" @click.stop="toOrderLogisticsTracking(item)">
												查看物流</view>
										</template>
										<template v-if="item.orderState == 1 || item.orderState == 2">
											<view class="exchange btn" @click.stop="showCancelOrder(item)">取消订单</view>
										</template>
										<template v-if="item.orderState == 3">
											<view class="evaluate btn" @click.stop="showConfirmReceipt(item)">确认收货
											</view>
										</template>
									</view>
								</view>
								<u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
							</template>
							<template v-else>
								<view>
									<view class="centre">
										<image src="../../static/image/wugwc.png" mode="">
										</image>
										<view class="explain">
											<!-- 您还没有相关的订单 -->
											<view class="tips">抱歉，没有找到订单哦</view>
										</view>
										<!-- <view class="btn" @click="toIndex">随便逛逛</view> -->
									</view>
								</view>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :scroll-with-animation="true"
						:scroll-top="scrollTop[3].scrollTop" @scroll="scroll" @scrolltolower="reachBottom">
						<view class="page-box">
							<template v-if="orderList[3].length">
								<view class="order" v-for="(item, index) in orderList[3]" :key="index">
									<view class="top">
										<view class="left">
											<!-- <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon> -->
											<view class="store">{{ item.updateTime }}</view>
											<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
										</view>
										<view class="right">{{ toOrderStatus(item.orderState) }}</view>
									</view>
									<view class="orderType">
										{{ item.orderType == 2 ? '自提' : '外卖' }}
									</view>
									<view class="" v-for="(jtem,jndex) in item.itemList" :key="jndex">
										<view class="item">
											<view class="left">
												<image :src="jtem.goodsImages" mode="aspectFill"></image>
											</view>
										</view>
									</view>
									<view class="total">
										合计:
										<text class="total-price">
											￥{{ item.totalAmount }}
											<!-- <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text> -->
										</text>
									</view>
									<view class="bottom">
										<!-- <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view> -->
										<template v-if="item.orderState == 3 || item.orderState == 4">
											<view class="logistics btn" @click.stop="toOrderLogisticsTracking(item)">
												查看物流</view>
										</template>
										<template v-if="item.orderState == 1 || item.orderState == 2">
											<view class="exchange btn" @click.stop="showCancelOrder(item)">取消订单</view>
										</template>
										<template v-if="item.orderState == 3">
											<view class="evaluate btn" @click.stop="showConfirmReceipt(item)">确认收货
											</view>
										</template>
									</view>
								</view>
								<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
							</template>
							<template v-else>
								<view>
									<view class="centre">
										<image src="../../static/image/wugwc.png" mode="">
										</image>
										<view class="explain">
											<!-- 您还没有相关的订单 -->
											<view class="tips">抱歉，没有找到订单哦</view>
										</view>
										<!-- <view class="btn" @click="toIndex">随便逛逛</view> -->
									</view>
								</view>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 取消订单询问 -->
		<u-modal v-model="isShowCancelOrder" ref="cancelOrder" @confirm="postOrderCancel" :show-confirm-button="true"
			:show-cancel-button="true" content="确定取消当前订单？"></u-modal>
		<!-- 确认收货询问 -->
		<u-modal v-model="isShowConfirmReceipt" ref="confirmReceipt" @confirm="postConfirmReceipt"
			:show-confirm-button="true" :show-cancel-button="true" content="请确保已收到货物在确认收货!是否确认收货？"></u-modal>
		<!-- 删除订单询问 -->
		<u-modal v-model="isShowDelOrder" ref="DelOrde" @confirm="postDeleteOrderMall" :show-confirm-button="true"
			:show-cancel-button="true" content="确定删除当前订单？"></u-modal>

		<u-toast ref="uToast" />
		<st-tabbar :value="1"></st-tabbar>
	</view>
</template>

<script>
	import StTabbar from '@/components/st-tabbar/st-tabbar.vue'
	export default {
		data() {
			return {
				isShowCancelOrder: false,
				isShowConfirmReceipt: false,
				isShowDelOrder: false,
				orderList: [
					[],
					[],
					[],
					[]
				],
				dataList: [],
				list: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					}
				],
				scrollTop: [{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					}
				],
				current: 0,
				swiperCurrent: undefined,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				params: [{
						page: 0,
						rows: 10,
						orderState: 0
					},
					{
						page: 0,
						rows: 10,
						orderState: 1
					},
					{
						page: 0,
						rows: 10,
						orderState: 2
					},
					{
						page: 0,
						rows: 10,
						orderState: 3
					}
				],
				mallOrderId: ''
			};
		},
		components: {
			StTabbar
		},
		onShow() {
			this.swiperCurrent = undefined
			this.current = uni.getStorageSync('orderIndex') || 0;
			this.swiperCurrent = this.current
			this.change(this.current);
		},
		onHide() {
			this.swiperCurrent = undefined
		},
		methods: {
			// 跳转物流跟踪
			toOrderLogisticsTracking(item) {
				uni.navigateTo({
					url: './order-logistics-tracking?mallOrderId=' + item.mallOrderId
				});
			},
			// 跳转订单详情页面
			toOrderDetails(item) {
				uni.navigateTo({
					url: './order-details?mallOrderId=' + item.mallOrderId
				});
			},
			// 随便逛逛去首页
			toIndex() {
				uni.switchTab({
					url: '../index/index'
				});
			},
			// 滚动页面监听
			scroll(e) {
				this.scrollTop[this.current].oldScrollTop = e.detail.scrollTop;
			},
			// 滚动到底触发
			reachBottom() {
				this.pullUp(this.current);
			},
			// 下拉刷新
			dropDown(idx) {
				// 修改当前view的数据
				this.params[idx].page = 1;
				// 加载下拉刷新的数据
				this.postFindOrderMallList(idx, 'down');
			},
			// 上拉加载
			pullUp(idx) {
				// 增加页数
				this.params[idx].page++;
				// 请求获取精品推荐商品数据
				this.postFindOrderMallList(idx, 'up');
			},
			// 商城订单-查询订单列表
			postFindOrderMallList(idx, type) {
				// console.log(this.params[idx]);
				this.$u.api
					.postFindOrderMallList(this.params[idx])
					.then(res => {
						
						uni.stopPullDownRefresh();
						console.log(res.data.rows, '[订单页面-查询订单列表]', this.params[idx]);
						// 如果是规格商品，将所有的商品信息修改成规格的商品信息
						res.data.rows = res.data.rows.map(item => {
							const goodsObj = item.goodsSku ? JSON.parse(item.goodsSku) : {}
							return {
								...item,
								goodsPrice: goodsObj.price,
								integral: goodsObj.integral,
								goodsImages: goodsObj.specImages,
								purchasePrice: goodsObj.purchasePrice
							}
						})
						// res.data.rows.forEach(v => {
						// 	if (v.goodsSku != null) {
						// 		v.goodsPrice = JSON.parse(v.goodsSku).price;
						// 		v.integral = JSON.parse(v.goodsSku).integral;
						// 		v.goodsImages = JSON.parse(v.goodsSku).specImages;
						// 		v.purchasePrice = JSON.parse(v.goodsSku).purchasePrice;
						// 	}
						// });
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (this.params[idx].page <= res.data.totalPage) {
								this.orderList[idx].push(...res.data.rows);
								// console.log(this.orderList[idx])
								this.loadStatus[idx] = 'loading';

								// 如果数量小于页容量，显示没有更多数据
								if (res.data.rows.length < this.params[idx].rows) {
									this.loadStatus[idx] = 'nomore';
								}
							} else {
								this.params[idx].page = res.data.totalPage;
								this.loadStatus[idx] = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 将数据
							this.orderList[idx].push(...res.data.rows);
							this.orderList[idx].splice(0, this.orderList[idx].length == 0 ? 0 : this.orderList[idx]
								.length - res.data.rows.length);

							this.$nextTick(() => {
								this.scrollTop[idx].scrollTop = 1;
								// this.scrollTop[idx].oldScrollTop = 0;
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 显示询问取消订单
			showCancelOrder(item) {
				this.mallOrderId = item.mallOrderId;
				this.isShowCancelOrder = true;
			},
			// 显示询问确认收货
			showConfirmReceipt(item) {
				this.mallOrderId = item.mallOrderId;
				this.isShowConfirmReceipt = true;
			},
			// 显示询问删除订单
			showDelOrder(item) {
				// 订单状态只有交易关闭和已完成可以删除
				if (item.orderState == 4 || item.orderState == 5) {
					this.mallOrderId = item.mallOrderId;
					this.isShowDelOrder = true;
				}
			},
			// 取消订单
			postOrderCancel() {
				this.$u.api
					.postOrderCancel({
						mallOrderId: this.mallOrderId
					})
					.then(res => {
						console.log(res, '[订单页面-取消订单接口]');
						this.$refs.uToast.show({
							title: '取消订单成功'
						});
						this.dropDown(this.current);
						this.isShowCancelOrder = false;
					})
					.catch(err => {
						console.log(err);
						this.$refs.cancelOrder.clearLoading();
					});
			},
			// 确认收货
			postConfirmReceipt() {
				this.$u.api
					.postConfirmReceipt({
						mallOrderId: this.mallOrderId
					})
					.then(res => {
						console.log(res, '[订单页面-确认收货接口]');
						this.$refs.uToast.show({
							title: '确认收货成功'
						});
						this.dropDown(this.current);
						this.isShowConfirmReceipt = false;
					})
					.catch(err => {
						console.log(err);
						this.$refs.confirmReceipt.clearLoading();
					});
			},
			// 删除订单
			postDeleteOrderMall() {
				this.$u.api
					.postDeleteOrderMall({
						mallOrderId: this.mallOrderId
					})
					.then(res => {
						console.log(res, '[订单页面-删除订单接口]');
						this.$refs.uToast.show({
							title: '删除订单成功'
						});
						this.dropDown(this.current);
						this.isShowDelOrder = false;
					})
					.catch(err => {
						console.log(err);
						this.$refs.delOrder.clearLoading();
					});
			},
			// 规格
			toSKU(skuList) {
				let specValue = '';
				if (skuList) {
					specValue = JSON.parse(skuList).specValue;
				}
				return specValue;
			},
			// 订单状态
			toOrderStatus(orderStatus) {
				let str = '';
				if (orderStatus == 1) str = '待付款';
				if (orderStatus == 2) str = '待发货';
				if (orderStatus == 3) str = '待收货';
				if (orderStatus == 4) str = '已完成';
				if (orderStatus == 5) str = '交易关闭';
				return str;
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.scrollTop[index].scrollTop = this.scrollTop[index].oldScrollTop;
				this.dropDown(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				console.log(dx)
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			changeSwiper(e) {
				let index = e.detail.current;
				this.scrollTop[index].scrollTop = this.scrollTop[index].oldScrollTop;
				this.dropDown(index);
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			padding-bottom: 1vh;
			border-bottom: 1px solid #ECECEC;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-family: PingFang SC;
					font-size: 12px;
					font-weight: normal;
					line-height: 17px;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0.09px;

					color: #999999;
				}
			}

			.right {
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: normal;
				line-height: 17px;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0.09px;

				color: #FF2525;
				// color: $u-type-warning-dark;
			}
		}

		.orderType {
			margin-top: 1vh;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 18px;
			letter-spacing: 0px;

			color: #333333;
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 149rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				line-height: 60rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				margin-left: 20rpx;
				color: #333333;

				&:first-of-type {
					margin-left: 0;
				}
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 254rpx;
			height: 254rpx;
			/* border-radius: 50%; */
			margin-top: 147rpx;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 60rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.temItem {
		display: inline-block;
	}
</style>